$monospace-font: Menlo, Monaco, Consolas, "Courier New", monospace;
$line-space: 16px;
$id: "--cyanosis";

$l-baseColor: #353535;
$l-titleColor: #005bb7;
$l-strongColor: #2196f3;
$l-emColor: #4fc3f7;
$l-delColor: #ccc;
$l-linkColor: #3da8f5;
$l-linkhColor: #007fff;
$l-borderColor: #bedcff;
$l-borderColor2: #ececec;
$l-bgColor: #fff;
$l-blockquoteColor: #8c8c8c;
$l-blockquoteBgColor: #f0fdff;
$l-codeColor: #c2185b;
$l-codeBgColor: #fff4f4;
$l-codePreColor: #f8f8f8;
$l-tableBorderColor: #c3e0fd;
$l-tableThColor: #dff0ff;
$l-tableThtColor: $l-titleColor;
$l-tableTrNcColor: #f7fbff;
$l-tableTrhColor: #e0edf7;
$l-selectionTextColor: #c80000;
$l-selectionBgColor: rgba(175, 207, 247, 0.25);
$l-selectionTitleColor: $l-titleColor;
$l-selectionTitlebgColor: $l-selectionBgColor;
$l-selectionDelColor: #999;
$l-selectionElBgColor: #e8ebec;
$l-selectionCodeBgColor: #ffeaeb;
$l-selectionPreCodeBgColor: rgba(160, 200, 255, 0.25);

$d-baseColor: #cacaca;
$d-titleColor: #ddd;
$d-strongColor: #fe9900;
$d-emColor: #ffd28e;
$d-delColor: #ccc;
$d-linkColor: #ffb648;
$d-linkhColor: $d-strongColor;
$d-borderColor: #ffe3ba;
$d-borderColor2: #ffcb7b;
$d-bgColor: #2f2f2f;
$d-blockquoteColor: #c7c7c7;
$d-blockquoteBgColor: rgba(255, 199, 116, 0.1);
$d-codeColor: #000;
$d-codeBgColor: $d-borderColor2;
$d-codePreColor: rgba(255, 227, 185, 0.5);
$d-tableBorderColor: $d-strongColor;
$d-tableThColor: $d-linkColor;
$d-tableThtColor: $d-codeColor;
$d-tableTrNcColor: #6d5736;
$d-tableTrhColor: #947443;
$d-selectionTextColor: #00c888;
$d-selectionBgColor: rgba(175, 207, 247, 0.25);
$d-selectionTitleColor: $d-codeColor;
$d-selectionTitlebgColor: $d-strongColor;
$d-selectionDelColor: #999;
$d-selectionElBgColor: $d-codeColor;
$d-selectionCodeBgColor: $d-borderColor2;
$d-selectionPreCodeBgColor: rgba(160, 200, 255, 0.25);

@mixin LightAndDark($isDark: false) {
  #{$id}-base-color: if($isDark, $d-baseColor, $l-baseColor);
  #{$id}-title-color: if($isDark, $d-titleColor, $l-titleColor);
  #{$id}-strong-color: if($isDark, $d-strongColor, $l-strongColor);
  #{$id}-em-color: if($isDark, $d-emColor, $l-emColor);
  #{$id}-del-color: if($isDark, $d-delColor, $l-delColor);
  #{$id}-link-color: if($isDark, $d-linkColor, $l-linkColor);
  #{$id}-linkh-color: if($isDark, $d-linkhColor, $l-linkhColor);
  #{$id}-border-color: if($isDark, $d-borderColor, $l-borderColor);
  #{$id}-border-color-2: if($isDark, $d-borderColor2, $l-borderColor2);
  #{$id}-bg-color: if($isDark, $d-bgColor, $l-bgColor);
  #{$id}-blockquote-color: if($isDark, $d-blockquoteColor, $l-blockquoteColor);
  #{$id}-blockquote-bg-color: if($isDark, $d-blockquoteBgColor, $l-blockquoteBgColor);
  #{$id}-code-color: if($isDark, $d-codeColor, $l-codeColor);
  #{$id}-code-bg-color: if($isDark, $d-codeBgColor, $l-codeBgColor);
  #{$id}-code-pre-color: if($isDark, $d-codePreColor, $l-codePreColor);
  #{$id}-table-border-color: if($isDark, $d-tableBorderColor, $l-tableBorderColor);
  #{$id}-table-th-color: if($isDark, $d-tableThColor, $l-tableThColor);
  #{$id}-table-tht-color: if($isDark, $d-tableThtColor, $l-tableThtColor);
  #{$id}-table-tr-nc-color: if($isDark, $d-tableTrNcColor, $l-tableTrNcColor);
  #{$id}-table-trh-color: if($isDark, $d-tableTrhColor, $l-tableTrhColor);
  #{$id}-slct-title-color: if($isDark, $d-selectionTitleColor, $l-selectionTitleColor);
  #{$id}-slct-titlebg-color: if($isDark, $d-selectionTitlebgColor, $l-selectionTitlebgColor);
  #{$id}-slct-text-color: if($isDark, $d-selectionTextColor, $l-selectionTextColor);
  #{$id}-slct-bg-color: if($isDark, $d-selectionBgColor, $l-selectionBgColor);
  #{$id}-slct-del-color: if($isDark, $d-selectionDelColor, $l-selectionDelColor);
  #{$id}-slct-elbg-color: if($isDark, $d-selectionElBgColor, $l-selectionElBgColor);
  #{$id}-slct-codebg-color: if($isDark, $d-selectionCodeBgColor, $l-selectionCodeBgColor);
  #{$id}-slct-prebg-color: if($isDark, $d-selectionPreCodeBgColor, $l-selectionPreCodeBgColor);
}

@mixin transitionColor() {
  transition: color 0.35s;
}

@mixin headTitle($padb: 4px, $fontSize: 24px, $mtop: 36px) {
  padding-bottom: $padb;
  margin-top: $mtop;
  margin-bottom: 10px;
  font-size: $fontSize;
  line-height: 1.5;
  color: var(--cyanosis-title-color);
}

@mixin blockquoteColor {
  color: var(--cyanosis-blockquote-color);
  border-left: 4px solid var(--cyanosis-strong-color);
  background-color: var(--cyanosis-blockquote-bg-color);
}

@mixin selectionColor($bgColor: "", $txtColor: "") {
  @if $bgColor != "" {
    background-color: var($bgColor);
  }
  @if $txtColor != "" {
    color: var($txtColor);
  }
}

.markdown-body {
  word-break: break-word;
  line-height: 1.75;
  font-weight: 400;
  font-size: 14px;
  overflow-x: hidden;
  color: var(--cyanosis-base-color);
  @include transitionColor();
  @include LightAndDark();

  &.__dark{
    @include LightAndDark(true);
  }

  h1 {
    @include headTitle(4px, 30px);
    @include transitionColor();
  }

  h2 {
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    @include headTitle(10px, 24px);
    border-bottom: 1px solid var(--cyanosis-border-color-2);
    @include transitionColor();

    &::before {
      content: "「";
      position: absolute;
      top: -6px;
      left: -14px;
    }

    &::after {
      content: "」";
      position: relative;
      top: 6px;
      right: auto;
    }
  }

  h3 {
    position: relative;
    @include headTitle(0, 20px, 30px);
    padding-left: 6px;
    @include transitionColor();

    &::before {
      content: "»";
      padding-right: 6px;
      color: var(--cyanosis-strong-color);
    }
  }

  h4 {
    @include headTitle(0, 16px, 24px);
    padding-left: 6px;
    @include transitionColor();
  }

  h5 {
    @include headTitle(0, 14px, 18px);
    padding-left: 6px;
    @include transitionColor();
  }

  h6 {
    @include headTitle(0, 12px, 12px);
    padding-left: 6px;
    @include transitionColor();
  }

  p {
    line-height: inherit;
    margin-top: $line-space;
    margin-bottom: $line-space;
  }

  img {
    max-width: 100%;
  }

  hr {
    position: relative;
    width: 98%;
    height: 1px;
    margin-top: 32px;
    margin-bottom: 32px;
    background-image: linear-gradient(
                    90deg,
                    var(--cyanosis-link-color),
                    rgba(255, 0, 0, 0.3),
                    rgba(255, 255, 255, 0.1),
                    rgba(255, 0, 0, 0.3),
                    var(--cyanosis-link-color)
    );
    border-width: 0;
    overflow: visible;

    &::after {
      content: "";
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      display: inline-block;
      width: 60px;
      height: 20px;
      background-color: var(--cyanosis-bg-color);
      background-image: url();
      background-repeat: no-repeat;
      background-size: auto 100%;
      background-position-x: center;
      transition: background-color 0.5s;
    }
  }

  code {
    padding: 0.065em 0.4em;
    font-family: $monospace-font;
    font-size: 0.87em;
    color: var(--cyanosis-code-color);
    word-break: break-word;
    overflow-x: auto;
    background-color: var(--cyanosis-code-bg-color);
    border-radius: 2px;
  }

  pre {
    font-family: $monospace-font;
    overflow: auto;
    position: relative;
    line-height: 1.75;

    > code {
      display: block;
      padding: 16px 12px;
      margin: 0;
      font-size: 12px;
      color: #333;
      word-break: normal;
      overflow-x: auto;
      background: var(--cyanosis-code-pre-color);
      //

      &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }

      &::-webkit-scrollbar-track {
        background-color: var(--cyanosis-border-color);
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--cyanosis-strong-color);
        border-radius: 10px;
      }
    }
  }

  a {
    position: relative;
    text-decoration: none;
    color: var(--cyanosis-link-color);
    border-bottom: 1px solid var(--cyanosis-border-color);

    &:hover {
      color: var(--cyanosis-linkh-color);
      border-bottom-color: var(--cyanosis-linkh-color);
    }

    &:active {
      color: var(--cyanosis-linkh-color);
    }

    &::after {
      position: absolute;
      content: "";
      top: 100%;
      left: 0;
      width: 100%;
      opacity: 0;
      border-bottom: 1px solid var(--cyanosis-border-color);
      transition: top 0.3s, opacity 0.3s;
      transform: translate3d(0, 0, 0);
    }

    &:hover::after {
      top: 0;
      opacity: 1;
      border-bottom-color: var(--cyanosis-linkh-color);
    }
  }

  table {
    display: inline-block !important;
    font-size: 12px;
    width: auto;
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--cyanosis-table-border-color);
    border-spacing: 0;
    border-collapse: collapse;

    thead {
      color: #000;
      text-align: left;
      font-size: 14px;
      background: #f6f6f6;
    }

    tr:nth-child(2n) {
      background-color: var(--cyanosis-table-tr-nc-color);
    }

    tr:hover {
      background-color: var(--cyanosis-table-trh-color);
    }

    th,
    td {
      padding: 12px 8px;
      line-height: 24px;
      border: 1px solid var(--cyanosis-table-border-color);
    }

    th {
      color: var(--cyanosis-table-tht-color);
      background-color: var(--cyanosis-table-th-color);
    }

    td {
      min-width: 120px;
    }
  }

  blockquote {
    @include blockquoteColor;
    padding: 1px 20px;
    margin: 22px 0;
    @include transitionColor();

    &::after {
      display: block;
      content: "";
    }

    & > p {
      margin: 10px 0;
    }

    & > b,
    & > strong {
      color: var(--cyanosis-strong-color);
    }
  }

  b,
  strong {
    color: var(--cyanosis-strong-color);
  }

  i,
  em {
    color: var(--cyanosis-em-color);
  }

  del {
    color: var(--cyanosis-del-color);
  }

  ol,
  ul {
    padding-left: 28px;

    li {
      margin-bottom: 0;
      list-style: inherit;

      & .task-list-item {
        list-style: none;

        ul,
        ol {
          margin-top: 0;
        }
      }
    }

    ul,
    ol {
      margin-top: 4px;
    }
  }

  ol li {
    padding-left: 6px;
  }

  // details & summary
  details {
    & > summary {
      outline: none;
      color: var(--cyanosis-title-color);
      font-size: 20px;
      font-weight: bolder;
      border-bottom: 1px solid var(--cyanosis-border-color);
      cursor: pointer;
    }

    & > p {
      padding: 10px 20px;
      margin: 10px 0 0;
      color: #666;
      background-color: var(--cyanosis-blockquote-bg-color);
      border: 2px dashed var(--cyanosis-strong-color);
    }
  }

  // selection
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    &::selection {
      @include selectionColor();
      color: var(--cyanosis-slct-title-color);
      background-color: var(--cyanosis-slct-titlebg-color);
    }
  }

  p,
  ol li,
  ul li {
    &::selection {
      color: var(--cyanosis-slct-text-color);
      background-color: var(--cyanosis-slct-bg-color);
    }
  }

  a,
  b,
  strong,
  i,
  em {
    &::selection {
      background-color: var(--cyanosis-slct-elbg-color);
    }
  }

  del::selection {
    color: var(--cyanosis-slct-del-color);
    background-color: var(--cyanosis-slct-elbg-color);
  }

  table {
    thead th {
      &::selection {
        background-color: transparent;
      }
    }
    tbody td {
      &::selection {
        background-color: var(--cyanosis-slct-bg-color);
      }
    }
  }

  code::selection {
    background-color: var(--cyanosis-slct-codebg-color);
  }

  pre {
    > code::selection {
      background-color: var(--cyanosis-slct-prebg-color);
    }
  }

  .contains-task-list {
    padding-left: 14px;
    list-style: none;

    input[type="checkbox"] {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: inherit;
        height: inherit;
        background: #f0f8ff;
        border: 1px solid #add6ff;
        border-radius: 2px;
        box-sizing: border-box;
        z-index: 1;
      }

      &:checked {
        &::after {
          content: "\2713";
          position: absolute;
          top: -12px;
          left: 0;
          right: 0;
          bottom: 0;
          width: 0;
          height: 0;
          color: #ff5555;
          font-size: 20px;
          font-weight: bold;
          z-index: 2;
        }
      }
    }
  }

  // @media
  @media (max-width: 720px) {
    h1 {
      font-size: 24px;
    }

    h2 {
      font-size: 20px;
    }

    h3 {
      font-size: 18px;
    }
  }
}
